<template>
    <div class="app-container">
        <div class="search-container" ref="searchRef"></div>
        <el-card shadow="never">
            <template #header>
                <el-button style="margin-bottom: 10px;" size="mini" type="primary" @click="addOrUpdate()">添加</el-button>
                <div class="red">
                    <div>公安部129号令《社会消防技术服务管理规定》：</div>
                    <div>“第二十七条 消防设施维护保养检测机构应当按照国家标准、行业标准规定的工艺、流程开展检测、维修、保养”</div>
                    <div>“第三十三条 消防技术服务机构应当在消防技术服务项目完成之日起五日内，通过社会消防技术服务信息系统将消防技术服务项目目录以及出具的书面结论文件予以备案。”</div>
                </div>
            </template>

            <el-table :height="pageHeight + 'px'" border :data="state.list" v-loading="state.loading">
                <el-table-column label="计划名称" prop="plan_name" min-width="100"> </el-table-column>
                <el-table-column label="计划时间" prop="plan_time" min-width="100"> </el-table-column>
                <el-table-column label="单位信息" prop="unit_info" min-width="100"> </el-table-column>
                <el-table-column label="单位名称" prop="unit_name" min-width="100"> </el-table-column>
                <el-table-column label="报告地址" prop="report_url" min-width="100">
                    <template #default="{ row }">
                        <el-button v-if="row.report_url" @click="showPDF(row.report_url)">预览pdf</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="报告时间" prop="report_time" min-width="100"> </el-table-column>
                <el-table-column label="操作" min-width="120">
                    <template #default="{ row }">
                        <el-button type="primary" link @click="addOrUpdate(row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container">
                <el-pagination style="margin-top: 15px;" background v-model:current-page="state.pagination.page"
                    v-model:page-size="state.pagination.rows" layout="total, sizes, prev, pager, next, jumper"
                    :total="state.total" @current-change="getList" @size-change="getList" />
            </div>
        </el-card>
        <AddOrUpdate ref="addOrUpdateRef" @refresh="getList(1)"></AddOrUpdate>
        <PdfPreview ref="pdfPreviewRef" />
    </div>
</template>

<script lang="ts" setup>
import { nextTick, reactive, ref, onMounted } from 'vue'
import { dataList } from '@/api/wbUnit'
import AddOrUpdate from './AddOrUpdate.vue'
import PdfPreview from '@/components/PdfPreview/index.vue'
const addOrUpdateRef = ref()
const pdfPreviewRef = ref()
const state = reactive({
    loading: false,
    url: '',
    pagination: {
        rows: 20,
        page: 1
    },
    total: 0,
    list: []
})

const pageHeight = ref(0);
const searchRef = ref(null)

onMounted(() => {
    pageHeight.value = window.innerHeight - searchRef.value.clientHeight - 355;
})

const getList = async (page = 1) => {
    state.loading = true
    if (page === 1) state.pagination.page = 1
    const { data } = await dataList(state.pagination).finally(() => (state.loading = false))
    state.list = data.data
    state.total = data.total
}
getList()

const addOrUpdate = (row?) => {
    addOrUpdateRef.value.open(row)
}
const showPDF = (url: string) => {
    pdfPreviewRef.value.open(url)
}
</script>

<style lang="scss" scoped>
.pdfobject-container {
    height: 680px;
    border: 1rem solid rgba(0, 0, 0, 0.1);
}

.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.red {
    color: red;
    font-size: 14px;
}

.red>div {
    margin-top: 10px;
}
</style>
